<template>
	<view class="box">
		<view class="row">
			<text>手机号</text>
			<input type="text" v-model="phone" maxlength="11" />
			<!-- <text ref="phones" class="phones">*手机号格式错误</text> -->
		</view>
		<view class="row">
			<view class="send">
				<button @click="want" :disabled="isShow">验证码</button>
				<text>{{num}} </text>
			</view>
			<input type="text" v-model="code" placeholder="- - - -" maxlength="4" />
		</view>
		<view class="row">
			<text style="font-size: 23rpx;">收不到验证码？试试 <text style="color:#00BB00;font-size: 23rpx;"> 语音验证</text></text>
			<!--   -->
			<button @click="submit" type="primary" :disabled="tag" style="width: 90%;
			border-radius: 80rpx;margin-top: 50rpx;">登录</button>
		</view>
		<view class="row" @click="skip">
			<text style="color: #006699;text-align: center;">通过微信授权登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				code: "",
				phone: "",
				isShow: true,
				num: "",
				tag: true,
				telphone:""
			}
		},
		watch: {
			phone: function(val) {
				let resu = /^1[3456789]\d{9}$/.test(val)
				console.log(resu);
				this.isShow = !resu
			},
			code: function() {
				if (this.code.length == 4 && this.isShow == true) {
					this.tag = false
				} else {
					this.tag = true
				}
			},

		},
		methods: {
			async want() {
				this.telphone=this.phone
				let result = await this.$http("/api/sms", "get", {
					phone: this.phone
				})
				console.log(result.data.list.code);
				this.value = result.data.list.code

				this.num = 60
				var timer = setInterval(() => {
					this.num--
					if (this.num <= 0) {
						clearInterval(timer)
						this.isShow = false
						this.num = ""
					}
				}, 1000)
				this.isShow = true
			},
			async submit() {
				
				if (this.code == this.value & this.code != ""&this.phone==this.telphone) {
					let sult = await this.$http("/api/wxlogin", "get", {
						phone: this.phone
					})
					console.log(sult.data);
					uni.setStorageSync("login", JSON.stringify(sult.data.list))
					uni.reLaunch({
						url: '../mine/mine'
					})
				} else {
					uni.showToast({
						title: "验证码错误",
						icon: "none"
					})
				}
			},
			skip() {
				uni.navigateTo({
					url: "../login/login"
				})
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	/* @import url("../../common/css/index.css"); */
	.box {
		position: relative;
	}

	.row {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 40rpx;
	}

	.send {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.send text:nth-of-type(2) {
		color: #00BB00;
	}

	.phones {
		color: red;
		font-size: 22rpx;
	}

	text {
		font-size: 27rpx;
		margin-bottom: 10rpx;
	}

	input {
		border-bottom: 1rpx solid gray;
		height: 65rpx;
	}

	.captcha {
		background: #007cfe;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 13rpx;
	}
</style>
